<template>
	<view class="pay-deposit">
		<view class="title">
			支付押金
		</view>
		<view class="money">
			<text class="mark">￥</text>
			<text class="price">{{ deposit }}</text>
		</view>
		<view class="btn-box">
			<!-- <u-button shape="circle" :custom-style="custom1" @click="payByBalance">余额支付</u-button> -->
			<u-button shape="circle" :custom-style="custom2" @click="payByWechat">微信支付</u-button>
		</view>
		<view class="tips">
			在指定时间到达工作地点，退回押金
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	name: 'payDeposit', // 支付押金
	data() {
		return {
			custom1: {
				'background':'#605AF5',
				'color': '#fff',
				'margin-bottom': '50rpx'
			},
			custom2: {
				'background':'#07C160',
				'color': '#fff',
			},
			deposit: 0,
			id: '',
		}
	},
	onLoad(e) {
		this.deposit = e.deposit;
		this.id = e.id;
	},
	methods: {
		payByBalance() { // 余额支付
			this.$refs.uToast.show({
				title: '暂不支持'
			});
		},
		payByWechat() {
			let params = {
				out_trade_no: this.id, // 商户订单号 必填
				openid: uni.getStorageSync('openId'), // 前台传入-openid用户唯一编号 微信小程序，微信公众号 必填
				attach: 'JD' // 附加数据（最大支持40个字节） 支付通知中原样返回，传FB或者JD
			}
			this.$u.api.postPay(params).then(res => {
				if(res.code == 1000) {
					uni.requestPayment({
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: e => {
							console.log(e, '支付回调')
							if (e.errMsg === 'requestPayment:ok') {
								let params = {
									id: this.id,
									code: 1
								}
								this.$u.api.postReceError(params).then(res => {
									if(res.code == 1000) {
										this.$u.toast('支付成功');
										uni.redirectTo({
											url: '/pages/order/place-order?id=' + this.id
										})
									}
								})
							}
						}
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.pay-deposit {
	padding: 100rpx 30rpx 0;
	.title {
		font-size:26rpx;
		font-weight:500;
		color:rgba(51,51,51,1);
		text-align: center;
	}
	.money {
		font-size:30rpx;
		font-weight:500;
		color:rgba(51,51,51,1);
		text-align: center;
		margin-top: 100rpx;
		.price {
			font-size: 90rpx;
		}
	}
	.btn-box {
		margin-top: 278rpx;
	}
	.tips {
		font-size:24rpx;
		font-weight:500;
		color:rgba(153,153,153,1);
		text-align: center;
		margin-top: 26rpx;
	}
}
</style>
